<!DOCTYPE html>
<title>cruscotto</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<html>

	<link type="text/css" rel="stylesheet" href="css/leaflet.css" />
	<link type="text/css" rel="Stylesheet" href="css/bjqs.css" />
	<link type="text/css" rel="Stylesheet" href="css/jquery.jscrollpane.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->
	<!--
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	-->

	<script src="js/leaflet.js"></script>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/bjqs-1.3.min.js"></script>
	<script src="js/jquery.jscrollpane.min.js"></script>
	<script src="js/jquery.vticker.js"></script>

	<style>
		body {
			padding: 0;
			margin: 0;
		}
		html, body, #map {
			width: 100%;
			height: 100%;
		}
		.info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255,255,255,0.8);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		}
		.info h4 {
			margin: 0 0 5px;
			color: #777;
		}
		.legend {
			line-height: 18px;
			color: #555;
		}
		.legend i {
			width: 18px;
			height: 18px;
			float: left;
			margin-right: 8px;
			opacity: 0.7;
		}
		.lastupdate {
			background-color: #0E73B7; /* #FFFFFF;*/
			background-image: url("images/update.png");
			background-position: 5px 5px;
			background-repeat: no-repeat;
			border-radius: 8px;
			box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
			clear: both;
			color: #FFFFFF;
			margin-top: 10px;
			margin-left: 10px;
			padding: 6px 6px 6px 30px;
			z-index: 7;
			opacity: 0.7;
		}

		/* NEWS */

		#newsDiv {
			width: 70%;
    		
		}
		.news-box {
			overflow: hidden;
			width: 100%;
			height: 80px;
			background-color: rgba(14,115,183,0.8);
			border-radius: 8px;
			margin-bottom: 10px;
			margin: auto;
			display: inline-block;
			padding: 8px 8px 8px 8px;
		}
		.news {
			overflow: hidden;
			background-color: #0E73B7;
			width: 100%;
			height: 100%;
			margin-right: 10px;
			font: 24px Arial, Helvetica, sans-serif;
			background-image: url("images/stemma.png");
			background-position: 15px 10px;
			background-repeat: no-repeat;
			border-radius: 8px;
			box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
			clear: both;
			color: #FFFFFF; /*#333333;*/
			padding: 5px 5px 5px 70px;
			z-index: 8;
			opacity: 0.9;
		}
		.news li {
			width: 50%;
		}
		
		/* EVENTI / ALERT */
		#eventsDiv {
			height: 100%;

		}
		.events-box {
			height: 94%;
			width: 270px;
			overflow: hidden;
			background-color: rgba(14,115,183,0.8);
			background-image: url("images/stemma.png");
			background-repeat: no-repeat;
			background-position: 5px 5px;
			margin-top: 10px;
			margin-bottom: 10px;
			margin-right: 5px;
			margin-left: 5px;
			color: #FFFFFF;
			border-radius: 8px;
			padding: 10px 10px 10px 10px;
			z-index: 10;
		}
		.events-title {
			font: 16px Arial, Helvetica, sans-serif;
			font-weight: bold;
			margin-left: 50px;
		}
		.events-title span {
			font: 14px Arial, Helvetica, sans-serif;
			margin-left: 5px;
			padding: 3px;
			border-radius: 8px;
			box-shadow: 0 1px 7px rgba(255, 255, 255, 0.4);
		}
		.events {
			overflow: hidden;
			height: 100%;
			padding: 10px 10px 50px 10px;
			margin-top: 30px;
			margin-bottom: 30px;
			opacity: 0.8;
			font: 14px Arial, Helvetica, sans-serif;
			background-color: #0E73B7;
			color: #FFFFFF;
			border-radius: 8px;
			box-shadow: 0 1px 7px rgba(0, 0, 0, 0.9);
			clear: both;
			padding: 16px 16px 16px 16px;
			z-index: 11;
		}
		.events ul {
			overflow: hidden;
			height: 100%;
			list-style-type: none;
  			padding-top: 5px; padding-bottom: 5px;
			font-size: 0;
		}
		.events ul li {
			width: 80%;
			font-size: 16px;
			border-bottom: 2px solid rgba(255,255,255,0.6); 
		}
		/*
		 #scrollbar {
		 width: 100%;
		 height: 580px;
		 overflow-y: auto;
		 scrollbar-arrow-color: #01101;
		 scrollbar-track-color: #25AAE;
		 scrollbar-face-color: #06666;
		 }
		 */
	</style>

	<body>

		<div id="map">
			<div id="newsDiv" class="leaflet-bottom">
				<div class="news-box" >
					<div class="news" id="banner-news">
						<ul class="bjqs">
							<li>
								Lunedì 4/11/2013 ore 14:00 processione piazza mercato
							</li>
							<li>
								Domenica blocco del traffico dalle 9 alle 17
							</li>
							<li>
								Casello autastradale brescia est chiuso
							</li>
							<li>
								Sottopassaggio via calindri allagato
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div id="eventsDiv" class="leaflet-top leaflet-right">
				<div class="events-box" id="box" >
					<div class="events-title">
						Comune di Brescia <span>12:11</span>
					</div>
					<div class="events">
						<ul>
							<li><span><img width="40px" src="images/RCA.png" /></span>
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet lorem in lacus semper pretium. Quisque vitae lacinia sapien, nec convallis velit. Donec quis orci at ipsum sodales commodo vitae at augue. Morbi iaculis adipiscing arcu, pharetra rutrum metus iaculis sit amet. In imperdiet, urna non rutrum interdum, urna erat euismod urna, nec condimentum justo lorem vel magna. Sed sed pretium lectus, quis pharetra elit. Phasellus egestas sapien sed arcu iaculis, pellentesque commodo nunc suscipit.
							</li>
							<li><span><img width="40px" src="images/RWK.png" /></span>
								Vestibulum interdum augue quis sollicitudin mollis. Sed sit amet dui arcu. Vestibulum mollis condimentum justo blandit elementum. Aenean nec elementum libero. Aliquam diam nisl, vehicula accumsan auctor a, volutpat vehicula nisl. Duis at luctus mauris. Maecenas venenatis diam congue vehicula hendrerit. Nunc interdum lacus eu semper sagittis. Sed mattis quam id tortor lacinia hendrerit. Morbi blandit dapibus nulla a elementum.
							</li>
							<li><span><img width="40px" src="images/WIG.png" /></span>
								Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum malesuada vestibulum tellus, et lobortis massa aliquet eu. Suspendisse tempor molestie rhoncus. Vivamus tempus dolor id diam accumsan aliquam. Praesent sollicitudin dolor tellus, tempus laoreet risus venenatis adipiscing. Maecenas hendrerit, odio nec mollis gravida, lorem risus aliquet augue, id varius justo leo ut mi. Ut pellentesque molestie accumsan.
							</li>
							<li><span><img width="40px" src="images/RCA.png" /></span>
								Aliquam nec metus at libero cursus vestibulum. Cras dui ante, congue vel nisi non, vulputate sodales neque. Nunc pulvinar erat sed ipsum ornare elementum. Donec vulputate erat ante, posuere sagittis felis euismod tristique. Integer ultrices neque mauris, a blandit lectus condimentum at. Vivamus laoreet felis et nunc dictum volutpat. Vivamus bibendum ac ante eu egestas.
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<script>
			function getColor(d) {
				return d > 1000 ? '#800026' : d > 500 ? '#BD0026' : d > 200 ? '#E31A1C' : d > 100 ? '#FC4E2A' : d > 50 ? '#FD8D3C' : d > 20 ? '#FEB24C' : d > 10 ? '#FED976' : '#FFEDA0';
			}

			var map = L.map('map', {
				center : [45.5411870, 10.2194440],
				zoom : 9
			});

			var LOADING_STRING = "<br/><br/><br/><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Loading...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/><br/><br/><br/><br/>";

			var updateTimeDiv;
			updateTimeDiv = $('.leaflet-top.leaflet-left');

			// BS [45.5411870, 10.2194440]
			// key leaflet    BC9A493B41014CAABB98F0471D759707
			// key personal   0FBA3CCBEEB240B8B396A762A558E0BB // UPPERCASE e c'è voluto circa 24h per averla attiva
			// 997 day
			// 999 night

			var api_server_url = "http://osm.qmap.it";
			var tile_server_url = "http://osm.qmap.it";

			//var mapUrl = tile_server_url + "/osm_tiles/{z}/{x}/{y}.png";
			var mapUrl = "http://{s}.tile.cloudmade.com/0FBA3CCBEEB240B8B396A762A558E0BB/999/256/{z}/{x}/{y}.png";
			//var speedUrl = tile_server_url + "/qmap_speed/{z}/{x}/{y}.png?ts={timestamp}";
			var trafficUrl = tile_server_url + "/qmap_traffic/{z}/{x}/{y}.png?ts={timestamp}";
			var mapLayer = loadLayer(mapUrl);
			//var speedLayer = loadLayer(speedUrl, 10);
			var trafficLayer = loadLayer(trafficUrl, 10);
			var eventsLayer;
			eventsLayer = L.geoJson();
			/*
			 var eventsMarkerGroup;
			 eventsMarkerGroup = new L.MarkerClusterGroup({
			 maxClusterRadius : 32,
			 iconCreateFunction : function(cluster) {
			 return new L.divIcon({
			 html : "<b>" + cluster.getChildCount() + "</b>",
			 className : 'eventCluster',
			 iconSize : L.point(32, 32)
			 });
			 }
			 });
			 */

			map.addLayer(mapLayer);
			//map.addLayer(speedLayer);
			map.addLayer(trafficLayer);
			refreshLastUpdate();
			var enable_event = true;
			loadEvents();

			function loadLayer(url, z_index) {
				var attribution = 'Map data &copy; OpenStreetMap contributors';
				z_index = typeof z_index !== 'undefined' ? z_index : 1;
				//alert(z_index);
				var layer = new L.TileLayer(url, {
					minZoom : 6,
					maxZoom : 16,
					attribution : attribution,
					zIndex : z_index,
					timestamp : new Date().getTime()
				});
				return layer;
			}

			function refreshLastUpdate() {
				var url = api_server_url + '/api/lastupdate';
				$.ajax({
					url : url,
					dataType : 'jsonp',
					success : function(json) {
						updateTimeDiv.html("<div class='lastupdate'>Ultimo aggiornamento: " + json.lastUpdate.substring(0, json.lastUpdate.length - 3) + "</div>");
						releaseId = json.releaseId;
						//updateTraffic(json.releaseId);
					},
					error : function(jqXHR, textStatus, errorThrown) {
						updateTimeDiv.html("Errore update");
					}
				});
			}

			function loadEvents() {
				if (enable_event) {
					// if (map.hasLayer(eventsMarkerGroup)) {
					var zoom = map.getZoom();

					var eventsIconUrl = '';

					var geojsonEventOptions = {
						pointToLayer : function(feature, latlng) {

							var lcdFrom = feature.properties.lcd_from;
							var lcdTo = feature.properties.lcd_to;
							var roaLcd = feature.properties.roa_lcd;
							var ogc_fid = feature.properties.ogc_fid;
							var dir = feature.properties.dir;

							var eventTypeId = feature.properties.event_type_id;

							eventsIconUrl = api_server_url + '/api/eventicons/' + eventTypeId;

							var pointMarker = L.marker(latlng, {
								icon : L.icon({
									iconUrl : eventsIconUrl,
									iconSize : [25, 25],
									iconAnchor : [13, 25],
									popupAnchor : [0, -25]
								})
							});

							pointMarker.bindPopup(LOADING_STRING, options = {
								maxWidth : 500,
								autoPan : false
							});

							var url = api_server_url + '/api/event/' + ogc_fid + '/' + roaLcd + '/' + dir + '/' + lcdFrom + '/' + lcdTo;

							pointMarker.on('click', function(e) {
								//console.error(url);
								//alert(url);
								$.ajax({
									url : url,
									dataType : 'html',
									type : 'GET',
									success : function(output) {
										$(".leaflet-popup-content").html(output);
									},
									error : function(jqXHR, textStatus, errorThrown) {
										console.error("ERROR:" + jqXHR);
										$(".leaflet-popup-content").html("Errore nel caricamento dati dal server: " + errorThrown);
									}
								});

							});

							return pointMarker;
						}
					};

					if (zoom >= 6) {// in pratica sempre
						/**
						 * @type LatLngBounds
						 */
						var bounds = map.getBounds();

						var url = api_server_url + '/api/events/' + zoom + '/' + bounds.toBBoxString();

						// eventsMarkerGroup.removeLayer(eventsLayer);
						$.ajax({
							url : url,
							dataType : 'jsonp',
							success : function(features) {
								eventsLayer.clearLayers();
								eventsLayer = L.geoJson(features, geojsonEventOptions);
								/*
								 eventsMarkerGroup.clearLayers();
								 eventsMarkerGroup.addLayer(eventsLayer);
								 */
								map.addLayer(eventsLayer);
							},
							error : function(jqXHR, textStatus, errorThrown) {
								eventsLayer.clearLayers();
							}
						});
					} else {
						eventsLayer.clearLayers();
					}
					//map.addLayer(eventsMarkerGroup);
				}

			}

			/*

			var legend = L.control({
			position : 'bottomright'
			});

			legend.onAdd = function(map) {

			var div = L.DomUtil.create('div', 'info legend'), grades = [0, 10, 20, 50, 100, 200, 500, 1000], labels = [];

			// loop through our density intervals and generate a label with a colored square for each interval
			for (var i = 0; i < grades.length; i++) {
			div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' + grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
			}

			return div;
			};

			legend.addTo(map);

			*/
			//alert(map.getZoom() +" "+ map.getBounds().toBBoxString());
			$(document).ready(function() {
				$('#banner-news').bjqs({
					height : 70,
					width : '80%',
					//nexttext : 'Nexto', // Text for 'next' button (can use HTML)
					//prevtext : 'Prevo', // Text for 'previous' button (can use HTML)
					responsive : false,
					animspeed : 5000,
					showmarkers : false,
					showcontrols : false
				});

				// disabilita propagazione evento sulla mappa sottostante

				//var container = L.DomUtil.get("scrollbar");
				//L.DomEvent.disableClickPropagation(container);
				//L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
				//$('#scrollbar').jScrollPane();
				$('.events').vTicker({
					speed: 2000,
					pause: 5000,
					showItems: 4,
					animation: 'fade',
					mousePause: false,
					height: 0,
					margin:10,
					padding: 10,
					direction: 'up'
				});
				
			});
		</script>

	</body>

</html>
